<template>
  <!-- <teleport to="#message"> -->
    <div
      class="alert fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
      :class="classObject"
      role="alert"
      v-if="isVisible"
    >
      <strong>{{ message }}</strong>
      <button type="button" class="close" aria-label="Close" @click="hide">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  <!-- </teleport> -->
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
// import useDOMCreate from "@/hooks/useDOMCreate";
export type MessageType = "success" | "error" | "default";

export default defineComponent({
  props: {
    type: {
      type: String as PropType<MessageType>,
      default: "default"
    },
    message: String
  },
  setup(props) {
    // const node = document.createElement('div')
    // node.id = 'message'
    // document.body.appendChild(node)
    // useDOMCreate('message')
    const isVisible = ref(true)
    const classObject = {
        'alert-success': props.type === 'success',
        'alert-danger': props.type === 'error',
        'alert-primary': props.type === 'default'
    }
    const hide = () => {
        isVisible.value = false
    }
    return {
        isVisible,
        classObject,
        hide
    };
  },
});
</script>

<style scoped></style>
